<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的个人博客</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar">
    <!-- 导航栏 -->
    <nav id="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">张三 <span class="text-primary">Dev</span></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于我</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#education">教育背景</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#projects">项目经验</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#internship">实习经历</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills">技能专长</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#photos">生活照</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系方式</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主页/封面 -->
    <section id="home" class="hero-section">
        <div class="overlay"></div>
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="row align-items-center">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-4 fw-bold neon-text">张三的个人博客</h1>
                    <p class="lead">计算机科学与技术 | 全栈开发 | AI爱好者</p>
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <a href="#about" class="btn btn-primary">了解更多</a>
                        <a href="#contact" class="btn btn-outline-light">联系我</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tech-animation">
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
            <div class="cube"></div>
        </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="section-padding">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>关于我</h2>
                <div class="line"></div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-5 mb-4 mb-md-0">
                    <div class="about-img">
                        <img src="placeholder-profile.jpg" alt="张三照片" class="img-fluid rounded-3">
                        <div class="floating-card">
                            <i class="fas fa-code card-icon"></i>
                            <span>5+ 项目经验</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="about-content">
                        <p>我叫张三，是一名计算机科学与技术专业的应届毕业生，毕业于北京大学。我对编程充满热情，尤其喜欢探索新技术和解决实际问题。我的技术栈包括Java、Python、Spring Boot、Vue.js等，同时我也对机器学习和深度学习有一定的了解。</p>
                        <div class="about-info">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <span class="info-title">姓名:</span>
                                        <span class="info-value">张三</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-title">邮箱:</span>
                                        <span class="info-value">zhangsan@example.com</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <span class="info-title">专业:</span>
                                        <span class="info-value">计算机科学与技术</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-title">GitHub:</span>
                                        <span class="info-value">github.com/zhangsan</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 教育背景 -->
    <section id="education" class="section-padding bg-light">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>教育背景</h2>
                <div class="line"></div>
            </div>
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="education-card">
                        <div class="education-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <div class="education-content">
                            <h3>北京大学</h3>
                            <p class="period">2017年9月 - 2021年6月</p>
                            <p class="degree">计算机科学与技术专业 | 本科</p>
                            <p class="gpa">GPA：3.8/4.0（专业排名前10%）</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目经验 -->
    <section id="projects" class="section-padding">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>项目经验</h2>
                <div class="line"></div>
            </div>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="project-card">
                        <div class="project-icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h3>在线教育平台开发</h3>
                        <p class="project-duration">2020年3月 - 2020年6月</p>
                        <p class="project-tech">Spring Boot、MySQL、Redis、Vue.js</p>
                        <div class="project-description">
                            <p>开发一个基于Web的在线教育平台，支持课程发布、在线学习、作业提交和成绩管理功能。</p>
                            <ul>
                                <li>负责后端API设计与开发，使用Spring Boot实现RESTful接口。</li>
                                <li>设计并优化数据库表结构，使用Redis缓存热点数据。</li>
                                <li>协助前端团队完成页面交互逻辑。</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="project-card">
                        <div class="project-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h3>基于深度学习的图像分类系统</h3>
                        <p class="project-duration">2019年9月 - 2019年12月</p>
                        <p class="project-tech">Python、TensorFlow、Keras</p>
                        <div class="project-description">
                            <p>使用卷积神经网络（CNN）实现图像分类，数据集为CIFAR-10。</p>
                            <ul>
                                <li>数据预处理与增强，包括图像归一化、数据增强等。</li>
                                <li>设计并训练CNN模型，最终准确率达到85%。</li>
                                <li>使用Flask框架搭建简单的Web界面展示分类结果。</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="project-card">
                        <div class="project-icon">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <h3>校园二手交易平台</h3>
                        <p class="project-duration">2018年12月 - 2019年3月</p>
                        <p class="project-tech">Django、SQLite、HTML/CSS/JavaScript</p>
                        <div class="project-description">
                            <p>开发一个校园内的二手物品交易平台，支持用户发布商品、在线聊天和交易功能。</p>
                            <ul>
                                <li>负责整体项目架构设计与开发。</li>
                                <li>实现用户注册登录、商品发布与搜索功能。</li>
                                <li>使用WebSocket实现实时聊天功能。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 实习经历 -->
    <section id="internship" class="section-padding bg-light">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>实习经历</h2>
                <div class="line"></div>
            </div>
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <h3>腾讯科技（深圳）有限公司</h3>
                                <p class="position">软件开发实习生</p>
                                <p class="duration">2020年7月 - 2020年9月</p>
                                <ul>
                                    <li>参与公司内部管理系统开发，负责模块设计与代码实现。</li>
                                    <li>使用Java和Spring Cloud微服务框架完成分布式系统开发。</li>
                                    <li>协助团队进行代码审查与性能优化，提升系统响应速度20%。</li>
                                </ul>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <h3>字节跳动（北京）有限公司</h3>
                                <p class="position">算法实习生</p>
                                <p class="duration">2019年7月 - 2019年9月</p>
                                <ul>
                                    <li>参与推荐算法优化项目，负责数据清洗与特征工程。</li>
                                    <li>使用Python和Pandas进行数据分析，提出改进建议并实现部分算法优化。</li>
                                    <li>协助团队完成A/B测试，提升推荐点击率5%。</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能专长 -->
    <section id="skills" class="section-padding">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>技能专长</h2>
                <div class="line"></div>
            </div>
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="skill-category">
                        <h3><i class="fas fa-code"></i> 编程语言</h3>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Java</span>
                                <span>90%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Python</span>
                                <span>85%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>JavaScript</span>
                                <span>80%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>C++</span>
                                <span>75%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="skill-category">
                        <h3><i class="fas fa-laptop"></i> 前端技术</h3>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>HTML/CSS</span>
                                <span>85%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Vue.js</span>
                                <span>80%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>React</span>
                                <span>75%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="skill-category">
                        <h3><i class="fas fa-server"></i> 后端技术</h3>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Spring Boot</span>
                                <span>90%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 90%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Django</span>
                                <span>85%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Node.js</span>
                                <span>80%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="skill-category">
                        <h3><i class="fas fa-database"></i> 数据库</h3>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>MySQL</span>
                                <span>85%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 85%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>Redis</span>
                                <span>80%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 80%"></div>
                            </div>
                        </div>
                        <div class="skill-item">
                            <div class="d-flex justify-content-between">
                                <span>MongoDB</span>
                                <span>75%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 生活照 -->
    <section id="photos" class="section-padding bg-light">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>生活照</h2>
                <div class="line"></div>
            </div>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="photo-card">
                        <img src="placeholder-image-1.jpg" alt="生活照1" class="img-fluid">
                        <div class="photo-overlay">
                            <p>学习时光</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="photo-card">
                        <img src="placeholder-image-2.jpg" alt="生活照2" class="img-fluid">
                        <div class="photo-overlay">
                            <p>旅行记忆</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="photo-card">
                        <img src="placeholder-image-3.jpg" alt="生活照3" class="img-fluid">
                        <div class="photo-overlay">
                            <p>兴趣爱好</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 兴趣爱好和性格特点 -->
    <section class="section-padding">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="section-title text-start">
                        <h2>兴趣爱好</h2>
                        <div class="line"></div>
                    </div>
                    <div class="interest-card">
                        <div class="interest-item">
                            <div class="interest-icon">
                                <i class="fas fa-code"></i>
                            </div>
                            <div class="interest-content">
                                <h3>编程</h3>
                                <p>喜欢研究开源项目，尤其是与分布式系统和人工智能相关的项目。</p>
                            </div>
                        </div>
                        <div class="interest-item">
                            <div class="interest-icon">
                                <i class="fas fa-book"></i>
                            </div>
                            <div class="interest-content">
                                <h3>阅读</h3>
                                <p>热衷于阅读技术书籍和博客，最近在读《深入理解计算机系统》。</p>
                            </div>
                        </div>
                        <div class="interest-item">
                            <div class="interest-icon">
                                <i class="fas fa-running"></i>
                            </div>
                            <div class="interest-content">
                                <h3>运动</h3>
                                <p>热爱跑步和羽毛球，每周坚持锻炼，保持健康的生活方式。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="section-title text-start">
                        <h2>性格特点</h2>
                        <div class="line"></div>
                    </div>
                    <div class="character-card">
                        <div class="row">
                            <div class="col-6 mb-3">
                                <div class="character-item">
                                    <div class="character-icon">
                                        <i class="fas fa-search"></i>
                                    </div>
                                    <h3>好奇心强</h3>
                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="character-item">
                                    <div class="character-icon">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <h3>团队合作</h3>
                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="character-item">
                                    <div class="character-icon">
                                        <i class="fas fa-clipboard-check"></i>
                                    </div>
                                    <h3>责任心强</h3>
                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="character-item">
                                    <div class="character-icon">
                                        <i class="fas fa-smile"></i>
                                    </div>
                                    <h3>乐观积极</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section id="contact" class="section-padding contact-section text-white">
        <div class="container neon-border" style="padding: 20px; margin-bottom: 30px;">
            <div class="section-title">
                <h2>联系方式</h2>
                <div class="line"></div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="contact-info">
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="contact-item">
                                    <div class="contact-icon">
                                        <i class="fas fa-phone"></i>
                                    </div>
                                    <div class="contact-text">
                                        <h3>电话</h3>
                                        <p>123-4567-8901</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="contact-item">
                                    <div class="contact-icon">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="contact-text">
                                        <h3>邮箱</h3>
                                        <p>zhangsan@example.com</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="contact-item">
                                    <div class="contact-icon">
                                        <i class="fab fa-github"></i>
                                    </div>
                                    <div class="contact-text">
                                        <h3>GitHub</h3>
                                        <p><a href="https://github.com/zhangsan" class="text-white">github.com/zhangsan</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="contact-item">
                                    <div class="contact-icon">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div class="contact-text">
                                        <h3>地址</h3>
                                        <p>北京市海淀区XX路XX号</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form mt-5">
                        <h3 class="text-center mb-4">给我留言</h3>
                        <form id="contact-form" action="https://formspree.io/f/xxxxxxxd" method="POST">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <input type="text" class="form-control" name="name" placeholder="您的姓名" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <input type="email" class="form-control" name="email" placeholder="您的邮箱" required>
                                </div>
                                <div class="col-12 mb-3">
                                    <input type="text" class="form-control" name="subject" placeholder="标题" required>
                                </div>
                                <div class="col-12 mb-3">
                                    <textarea class="form-control" name="message" rows="5" placeholder="您的留言" required></textarea>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary">发送留言</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container text-center">
            <p>© 2023 张三的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS 和 依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var scrollSpy = new bootstrap.ScrollSpy(document.body, {
                target: '#navbar'
            });

            // 导航栏背景色随滚动变化
            window.addEventListener('scroll', function() {
                if (window.scrollY > 50) {
                    document.getElementById('navbar').classList.add('navbar-scrolled');
                } else {
                    document.getElementById('navbar').classList.remove('navbar-scrolled');
                }
            });
            
            // 表单提交处理
            const contactForm = document.querySelector('#contact-form');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    // 这里不再阻止表单提交，而是添加提交前的逻辑
                    
                    const submitBtn = this.querySelector('button[type="submit"]');
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 发送中...';
                    submitBtn.disabled = true;
                    
                    // 延迟3秒后恢复按钮状态（给Formspree提交时间）
                    setTimeout(() => {
                        submitBtn.innerHTML = '发送留言';
                        submitBtn.disabled = false;
                    }, 3000);
                    
                    // 表单会正常提交到Formspree
                });
            }
            
            // 辅助函数：显示提示信息
            function showAlert(message, type) {
                // 检查是否已有提示信息，如果有则移除
                const existingAlert = document.querySelector('.contact-alert');
                if (existingAlert) {
                    existingAlert.remove();
                }
                
                // 创建提示元素
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert alert-${type} contact-alert mt-3`;
                alertDiv.textContent = message;
                
                // 添加到表单后面
                contactForm.after(alertDiv);
                
                // 5秒后自动消失
                setTimeout(() => {
                    alertDiv.classList.add('fade-out');
                    setTimeout(() => alertDiv.remove(), 500);
                }, 5000);
            }
        });
    </script>
</body>
</html> 